<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			#div2{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
		</style>
		
	</head>
	<body>
		<button type="button" id='btn' onclick="aa()">按钮</button></br>
		<div id="div1" onmouseenter="bb()" onmouseleave="cc()" onmousemove="dd()"></div></br>
		
		用户名：<input type="text" name="" id="name" value="" onfocus="hdjd1()" onblur="sqjd1()"/>
		密码：<input type="text" name="" id="possword" value="" onfocus="hdjd2()" onblur="sqjd2()"/>
		<button type="button" onclick="djtj()">提交</button></br></br>
		
		<div id="div2" ></div></br>
		<button type="button"  onclick="adde()">添加监听器</button></br>
		<button type="button"  onclick="rem()">清除监听器</button></br>
		
	</body>
	<script type="text/javascript">
		//作业1 单击事件
		//绑定方式1
		function aa(){
			console.log('点击了');
		}
		//绑定方式2
		// document.getElementById('btn').onclick == aa;
		//绑定方式3
		// document.getElementById('btn').addEventListener('click',aa)
		
		//作业2  进入事件，离开事件，移动事件
		function bb(){
			console.log('进入div');
		}
		function cc(){
			console.log('离开div');
		}
		function dd(){
			console.log('在div里移动');
		}
		
		// 任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		function hdjd1(){
			console.log('用户在输入名称');
		}
		//          3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		function sqjd1(){
			if (document.getElementById('name').value == '') {
				alert('没有输入用户名');
			}
		}
		//          3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		function hdjd2(){
			console.log('用户在输入密码');
		}
		//          3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		function sqjd2(){
			if (document.getElementById('possword').value == '') {
				alert('没有输入密码');
			}
		}
		//          3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		//               密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		function djtj(){
			if(document.getElementById('name').value == '' && document.getElementById('possword').value == ''){
				alert('用户名和密码为空');
			}else{
				if (document.getElementById('name').value == '' ){
					alert('用户名为空');
				}
				 
				if(document.getElementById('possword').value == '') {
					alert('密码为空');
				}
			}
			
		}
		
		//作业4
		//实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
			
		function yd(){
			console.log('中国移动');
		}
		function adde(){
			document.getElementById('div2').addEventListener('mousemove',yd);
		}
		function rem(){
			document.getElementById('div2').removeEventListener('mousemove',yd);
		}
	</script>
</html>
